<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef"> </GlobalTopBar>
    <!-- 顶部蓝色 -->
    <view class="topblue">
      <image :src="`${store.imgDomain}master_tj_1.png`" mode="scaleToFill" />
    </view>
    <!-- 内容 -->
    <view class="page_content">
      <view class="centers">
        <!-- 顶部信息 -->
        <view class="wbox">
          <!-- 头像 -->
          <view class="headbox">
            <image
              class="headimg"
              :src="
                store.workerData?.headimg || `${store.imgDomain}my_hade.png`
              "
              mode="scaleToFill"
            />
          </view>
          <!-- 其他信息 -->
          <view class="infobox">
            <view class="infobox_item infobox_left">
              <text style="font-size: 30rpx">{{
                `${store.workerData?.worker_name}`
              }}</text>
              <view class="vts flex">
                <text>{{ store.workerData?.phone }}</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 二维码 -->
        <view class="ewm">
          <image
            class="ewm_img"
            :src="`${store.imgDomain}ewm.jpg`"
            mode="scaleToFill"
          />
        </view>
        <!-- 提示文字 -->
        <view class="texts">扫一扫上面的二维码，立即下单</view>
      </view>

      <!-- 文字 -->
      <view class="btext">
        <image :src="`${store.imgDomain}my_text2.png`" mode="scaleToFill" />
      </view>
    </view>
    <!-- 底部菜单 -->
    <tabBar
      :current-index="3"
      :tab-list="store.tabList2"
      :style-config="{ activeColor: '#6ECDC1', inactiveColor: '#666666' }"
    ></tabBar>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useCounterStore } from '@/store';
import tabBar from '@/components/tabBar.vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { formatTimestamp } from '@/utils/validate';

const title = ref('我的');
const store = useCounterStore();
const couponQuantity = ref(0);
const workerData = ref({});
const orderList = [
  {
    url: `${store.imgDomain}master_home_4.png`,
    num: 2,
    type: 1,
    text: '待接单',
  },
  {
    url: `${store.imgDomain}master_home_5.png`,
    num: 2,
    type: 1,
    text: '服务中',
  },
  {
    url: `${store.imgDomain}master_home_6.png`,
    num: 2,
    type: 1,
    text: '已完成',
  },
  {
    url: `${store.imgDomain}master_home_7.png`,
    num: 2,
    type: 1,
    text: '超时/拒单',
  },
];

// 获取用户有效优惠券数量
const getUserCouponCount = async () => {
  couponQuantity.value = await request('wxapp/user/getUserCouponCount');
};

// 通过open_id获取师傅数据
const getWorkerByOpenId = async () => {
  store.workerData = await request('wxapp/login/getWorkerByOpenId');
  console.log(store.workerData);
};

onShow(() => {
  // getUserCouponCount();
});
onLoad(() => {
  // getWorkerByOpenId();
});
</script>

<style scoped lang="scss">
.page-container {
  color: #fff;
  background-color: #f8f8f8;
}
.topblue {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  image {
    width: 750rpx;
    height: 319rpx;
  }
}
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.page_content {
  position: relative;
  z-index: 1;
  padding: 20rpx;
  color: #333;
  .centers {
    box-sizing: border-box;
    padding: 40rpx;
    background-color: #fff;
    border-radius: 20rpx;
    border: 1rpx solid #71cdc4;
  }
  .wbox {
    display: flex;
    align-items: center;

    .headbox {
      width: 71rpx;
      height: 71rpx;
      margin-right: 20rpx;
      .headimg {
        width: 71rpx;
        height: 71rpx;
        border-radius: 50%;
        border: 1rpx solid #1383ff;
      }
    }
    .infobox {
      flex: 1;
      display: flex;
      justify-content: space-between;
      .infobox_item {
        display: flex;
        flex-direction: column;
        .vts {
          margin: 10rpx 0 0;
          image {
            width: 28rpx;
            height: 27rpx;
            margin: 0 10rpx;
          }
        }
        .t2 {
          display: flex;
          align-items: center;
        }
        .rtoptext {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 10rpx;
          .line {
            display: block;
            width: 1rpx;
            height: 33rpx;
            background-color: rgba(255, 255, 255, 0.3);
            margin: 0 20rpx;
          }
        }
      }
      .infobox_right {
        box-sizing: border-box;
        padding-bottom: 8rpx;
        justify-content: space-between;
      }
    }
  }
  .ewm {
    margin: 60rpx auto;
    width: 507rpx;
    height: 507rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .texts {
    text-align: center;
    margin-bottom: 40rpx;
  }
}
.hybox {
  border-radius: 15rpx;
  background-color: #fff;
  font-size: 24rpx;
  box-sizing: border-box;
  padding: 20rpx 35rpx;
  display: flex;
  align-items: center;
  display: flex;
  margin: 10rpx 0;
  .audio_img {
    margin-right: 10rpx;
    width: 34rpx;
    height: 31rpx;
  }
}
.hybtn {
  display: flex;
  align-items: center;
  font-size: 20rpx;
  color: #315dd8;
  padding-left: 20rpx;
  background-color: #cfe9ff;
  border-radius: 17rpx;
  line-height: 34rpx;
}
.hyicon {
  width: 33rpx;
  height: 30rpx;
  margin-right: 15rpx;
}
.hyname {
  font-size: 30rpx;
  color: #ffc66e;
}
.line {
  height: 26rpx;
  width: 1rpx;
  background-color: #fff;
  margin: 0 20rpx;
}
.times {
  color: #fff;
  font-size: 24rpx;
}
.ckqb {
  color: $uni-text-color-grey;
}
.srbox {
  padding: 30rpx 0;
  background-color: #fff;
  border: 1rpx solid #71cdc4;
  border-radius: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  .srbox_item {
    width: 33%;
    flex-direction: column;
    .t1 {
      font-size: 36rpx;
      font-weight: 700;
      margin-bottom: 20rpx;
    }
    .t2 {
      color: $uni-text-color-grey;
    }
  }
}
.btext {
  position: relative;
  margin-top: 35rpx;
  display: flex;
  justify-content: center;
  &::after {
    content: ' ';
    width: 100rpx;
    height: 1rpx;
    position: absolute;
    top: 50%;
    left: 140rpx;
    transform: translateY(-50%);
    background-color: #93dad3;
  }
  &::before {
    content: ' ';
    width: 100rpx;
    height: 1rpx;
    position: absolute;
    top: 50%;
    right: 140rpx;
    transform: translateY(-50%);
    background-color: #93dad3;
  }
  image {
    position: relative;
    display: block;
    opacity: 0.6;
    width: 185rpx;
    height: 38rpx;
  }
}
</style>
